import '../styles/Register.scss'
import Left from '../images/left.svg'
import right from '../images/right.svg'
import {Form,Input,Button,Select,notification} from 'antd'
import React,{useState,useEffect} from 'react';
import {patient_login,patient_register,patient_update} from '../utils/api'
import {useNavigate} from 'react-router-dom'
import axios from 'axios'
import useDebounce from '../hooks/useDebounce'


interface Props{
    code:number,
    // label:string,
}
const sendQuery = (query:any) => console.log(`Querying for ${query}`);
function Register(props:Props) {
    var navigate = useNavigate()
    var [options,setOptions] = useState([{}])
    var [userlist,setUserlist] = useState([])
    useEffect(()=>{
        // 获取角色列表
        // console.log(1)
        patient_update().then((res)=>{
            // console.log(res);
            var arr = res.data.map((item:any)=>{
                return {label:item.label,value:item.value};
            })
            setOptions(options=arr);
        })
        // axios.get('/commentsgll').then((res)=>{
        //     var arr = res.data.map((item:any)=>{
        //         return {label:item.label,value:item.value};
        //     })
        //     setOptions(options=arr);
            
        // })
        setOptions([{label:'职工',value:'职工'},{label:'患者',value:'患者'}])
    },[])
    const [userQuery, setUserQuery] = useState("");
    const delayedQuery = useDebounce((q:any) => sendQuery(q), 500);
    // const onChange = (e:any) => {
    //     setUserQuery(e.target.value);
    //     delayedQuery(e.target.value);
    // };


    const onFinish = (value:any)=>{
        console.log(value);
        var userobj = {}
        if(value.pass == value.repass){
            if(value.role == '职工'){
                userobj = {
                    token:"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJwaG9uZSI6I…yNTZ9.xK9ykSICAn1panYcenvQvcO7HBfC6UXwe958P8VO2Do",
                    userinfo:{
                    phone:value.phone,
                    nickname:value.nickname,
                    pass:value.pass,
                    repass:value.repass,
                    id: 1,
                    user:"888888",
                    role:{
                      name:value.role,
                      permission:[11,111,12,121,122,123,124,13,131,132,133,134,135,14,141,142,143,144,145,146,147,15,151,152,153,154,155],
                      role_id:"1"
                    },
                  }}
    
            }else if(value.role == '患者'){
                userobj = {
                    token:"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJwaG9uZSI6I…yNTZ9.xK9ykSICAn1panYcenvQvcO7HBfC6UXwe958P8VO2Do",
                    userinfo:{
                    phone:value.phone,
                    nickname:value.nickname,
                    pass:value.pass,
                    repass:value.repass,
                    id: 1,
                    user:"888888",
                    role:{
                      name:value.role,
                      permission:[11,111,12,121,122,123,124,13,131,132,133,134,135,14,141,142,143,144,145,146,147],
                      role_id:"1"
                    },
                  }}
            }
            patient_register(userobj).then((res)=>{
                console.log(res.data)
                setUserQuery(value);
                delayedQuery(value);
                notification.success({message:'注册成功'});
                navigate('/login')
            })
        }else{
            notification.success({message:'密码和确认密码不一致'});
        }
        // console.log(userobj)
       
        // axios.post('/postsgllone',userobj).then((res)=>{
        //     console.log(res.data);
        //     notification.success({message:'注册成功'});
        //     navigate('/login')
        // })
    }
    // 已有账号跳转登录页
    var tologin = ()=>{
        navigate('/login')
    }
    return (
        <div className='register'>
            <div className='left'>
                <img src={Left}/>
            </div>
            <div className='center'>
                <div className="text">
                    <h2>注册</h2>
                    <h5>九尾医疗服务后台管理系统</h5>
                </div>
                <div className='import'>
                <Form
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 16 }}
                onFinish={onFinish}
                >
                    <Form.Item
                        label="手机号"
                        name="phone"
                        rules={[{ required: true, message: '输入手机号' ,pattern:/^1[3-9]\d{9}$/}]}
                    >
                        <Input placeholder='请输入正确的手机号'/>
                    </Form.Item>
                    <Form.Item
                        label="昵称"
                        name="nickname"
                        rules={[{ required: true, message: '输入昵称' }]}
                    >
                        <Input placeholder='输入昵称'/>
                    </Form.Item>
                    <Form.Item
                        label="密码"
                        name="pass"
                        rules={[{ required: true, message: '输入账号',pattern:/^.{1,11}$/ }]}
                    >
                        <Input placeholder='输入密码'/>
                    </Form.Item>
                    <Form.Item
                        label="确认密码"
                        name="repass"
                        // rules={[{ required: true, message: '输入姓名', pattern:/^.{1,10}$/ }]}
                        rules={[( { getFieldValue} )=>({
                            validator(rule,value){
                                if(!value || getFieldValue('pass') === value){
                                    return Promise.resolve();
                                }
                                return Promise.reject('密码和确认密码不同')
                            }
                        })]}
                    >
                        <Input placeholder='确认密码'/>
                    </Form.Item>
                    <Form.Item
                        label="角色"
                        name="role"
                        rules={[{ required: true, message: '选择角色' }]}
                    >
                        <Select
                        style={{ width: 120 }}
                        options={options}
                        />
                    </Form.Item>

                    <Form.Item wrapperCol={{ offset: 4, span: 16 }}>
                        <Button type="primary" htmlType="submit">注册</Button>
                    </Form.Item>
                </Form>
                </div>
                <span onClick={tologin} className="tologin">已有账号，去登录</span>
            </div>
            <div className='right'>
                <img src={right}/>
            </div>
        </div>
    );
}

export default Register;